<template>
	<view class="content">
		<view class="top-box">
			<view class="top-content">
				<view class="self-headicon" @click="fnNavatoLogin">
					<image class="icon" :src="userInfo?userInfo.avatarurl:'../../static/img/99.png'"></image>
				</view>
				<view class="icon-desc" :style="{color:nickname==''?'#a9a9a9':''}">
				{{userInfo==''?'~~未登录':userInfo.nickname}}
				</view>
			</view>
		</view>
		<view>
			<uniNoticeBar showIcon="true" :text="text" scrollable="true"></uniNoticeBar>
		</view>
		<view class="bottom">
			<view class="addclass" @click="fnNavgateTo">+新建班级</view>
			<view class="itemlist">
				<view class="i-title">我的班级</view>
				
				<vs-cssloading :show="loading"></vs-cssloading>
				<view v-if="shownolist" class="nolist">
					还没有加入班级哦！
				</view>
				<bHomeList @click="fnItemClick"  :itemList="myclassList" style="width: 100%;"></bHomeList>
			</view>
			<view class="itemlist" v-if="hotclassList.length==0?false:''">
				<view class="i-title">精选班级</view>
				<bHomeRecomList :itemList="hotclassList" style="width: 100%;"></bHomeRecomList>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import bHomeList from '../compoments/b-homelist.vue'
	import bHomeRecomList from '../compoments/b-HomeRecomList.vue'
	export default {
		components:{
			uniNoticeBar,bHomeList,bHomeRecomList
		},
		data() {
			return {
				//nickname:'',
				shownolist:false,
				loading:true,
				myclassList:[],
				hotclassList:[],
				userInfo:uni.getStorageSync('userInfo'),
				text:'欢迎使用我们研发的应用;在使用过程中，如果遇到任何问题，请联系我们：892955029@qq.com'
				
			}
		},
		mounted() {
			console.log(222)
		},
		onShow() {
			this.userInfo=uni.getStorageSync('userInfo')
			this.fnGetClassList()
			//this.loading=true
			this.shownolist=false
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.fnGetClassList()
			this.loading=true
			this.shownolist=false
		},
		onReachBottom() {
			//this.$fun.toast('触底了')
		},
		methods: {
			fnNavatoLogin(){
				uni.navigateTo({
					url:'../mylogin/mylogin'
				})
			},
			fnItemClick(e){
				console.log(e)
				let params={
					userid:uni.getStorageSync('userInfo').userid,
					wkid:e.item.wk_id
				}
				console.log(params)
				let that=this
				if(e.index==='exit'){
					
					that.$fun.modal('确定退出'+e.item.wk_className+'吗？退出班级后联系老师还可以再次加入',true,function(success){
						that.$fun.request(params,'php/xcx_exitclass.php').then(res=>{
							console.log(res)
							if(res.data>0){
								let myclassList=that.myclassList.filter(v=>v.wk_id!=e.item.wk_id)
								that.myclassList=myclassList
								that.$fun.toast('退出成功！')
							}
						})
						
					})
					
				}else{
					console.log(params)
					that.$fun.modal('确定删除'+e.item.wk_className+'吗？将会删除班级信息和班级下所有学生信息','',function(success){
						that.$fun.request(params,'php/xcx_deleteclass.php').then(res=>{
							console.log(res)
							if(res.data>0){
								let myclassList=that.myclassList.filter(v=>v.wk_id!=e.item.wk_id)
								that.myclassList=myclassList
								that.$fun.toast('删除成功！')
							}
							
						})
						
					})
					
					
				}
			},
			fnGetClassList(){
				//console.log(88)
				if(uni.getStorageSync("userInfo")){
					let userid=uni.getStorageSync("userInfo").userid
					let params={
						userid:userid
					}
					console.log(params)
					this.$fun.request(params,'php/xcx_getmyclasslist.php').then(res=>{
						console.log(res)
						setTimeout(()=>{
							this.loading=false
							if(res.data.length==0){
								this.shownolist=true
								//return
							}
							let aa=res.data.map(v=>{
								if(userid==v.wk_id.substr(0,6)){
									v.istch=true
								}else{
									v.istch=false
								}
								return v;
							})
							this.myclassList=aa
							console.log(this.myclassList)
							this.$store.state.classList=aa;//全局我的班级列表
						},3000)
					}).catch((err)=>{
						this.loading=false
						this.shownolist=true
					})
				}else{
					setTimeout(()=>{
						this.loading=false
						this.shownolist=true
					},3000)
				}
			},
			fnNavgateTo(e){
				// console.log(e)
				// console.log(this)
				if(uni.getStorageSync('userInfo')){
					uni.navigateTo({
					    url: '../src/newclass/newclass'
					});
				}else{
					uni.navigateTo({
					    url: '../mylogin/mylogin'
					});
				}
			},
			fnClickOnce(){
				console.log(666)
				uni.request({
				    url: 'https://loveioo.com/1001/linexcx/php/phpcom/test.php', //仅为示例，并非真实接口地址。
				    data: {
				        text: 'uni.request'
				    },
				    success: (res) => {
				        console.log(res.data); 
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		background: #fff;
		.top-box{
			width: 100%;
			height: 160px;
			//background-color: #4CD964;
			overflow: hidden;
			position: relative;
			display: flex;
			justify-content: center;
			&::after{
				content: "";
				width: 160%;
				height: 160px;
				//background-color: #4CD964;
				background-image: linear-gradient(#ffb84d,#ff9900);
				display: table;
				clear: both;
				border-radius:  0 0 50% 50%;
				position: absolute;
				top: 0;
				z-index: 1;
			}
			
			
			.top-content{
				top: 10px;
				position: absolute;
				//background-color: #007AFF;
				display: flex;
				z-index: 2;
				flex-direction: column;
				align-items: center;
				.self-headicon{
					width: 60px;
					height: 60px;
					border-radius: 100%;
					background-color: #007AFF;
				//	position: absolute;
					//top: 20px;
					box-shadow: 0 0 20px #fff;
					overflow: hidden;
					.icon{
						width: 60px;
						height: 60px;
					}
				}
				.icon-desc{
					margin-top: 10px;
					color: #fff;
				}
				
				
				
			}
		}
		.bottom{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			//background: #72ffab;
			.addclass{
				width: 95%;
				padding: 5px 0;
				//background-color: #2C405A;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-shadow: 0px 2px 2px #ffebcc;
				color: #cca300;
			}
			.itemlist{
				width: 95%;
				display: flex;
				flex-direction: column;
				//background-color: #007AFF;
				.nolist{
					height: 120px;
					background-color: #f9f9f9;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #8a8a8a;
				}
				.loading{
					width:100%;
					height: 120px;
					//background: #F0AD4E;
					display: flex;
					align-items: center;
					justify-content: center;
					.loading-img{
						width: 30px;
						height: 30px;
					}
				}
				.i-title{
					//width: 100%;
					margin: 10px 0;
					padding: 5px 0;
					font-size: 16px;
					color: $uni-text-color;
					//background-color: #007AFF;
					border-bottom: 1px solid #eee;
				}
			}
			
		}
		
	}

</style>
